<template>
    <div>
         <div class="news-list">
            <van-cell v-for="(item,index) in HotList" :key="index">
                <div class="content">
                    <div class="top">
                        <div class="source">
                            {{item.articleSource}}
                        </div>
                        <router-link tag="div" class=more :to="{name:'hotlistdetails',params:{id:item.articleId}}">
                            更多
                            <van-icon name="arrow" />
                        </router-link>
                    </div>
                    <div class="middle">
                        <div class="title">
                            {{item.title}}
                        </div>
                        <div class="pic">
                            <img :src="item.coverImgUrl" alt="">
                        </div>
                    </div>
                    <div class="bottom-title">{{item.createTime}}</div>
                </div>
            </van-cell>
        </div>
        <!-- <van-list  v-for="(item,index) in HotList" :key="index">
            <router-link :to="{name:'hotlistdetails',params:{id:item.articleId}}" tag="div" class="hot-news">
                 <div class="picture">
                    <img :src="item.imgList" alt="" width="100%" height="100px">
                </div>
                <div class="text-introduce">
                    <p>{{item.title}}</p>
                    <span>{{item.articleSource}}</span><br>
                    <span>{{item.createTime}}</span>
                </div>
            </router-link>
        </van-list> -->
    </div>
</template>


<script>
import {getHotNews} from '../api/List-api'
export default {
    created() {
        getHotNews(1,10).then(res=>{
            this.HotList = res.rows;
        })
    },
    data() {
        return {
            HotList:[]
        }
    },
}
</script>


<style lang="less" scoped>
    * {
        margin: 0;
        // padding: 0;
    }
    .hot-news {
        width: 90%;
        height: 100px;
        // background-color: blue;
        margin: 10px 5%;
    }
    .picture {
        width: 40%;
        height: 100px;
        float: left;
    }
    .text-introduce {
        width: 60%;
        height: 100px;
        float: right;
        // background-color: aqua;
        p {
            width: 90%;
            height: 50px;
            margin: 5px 5%;
            word-break : break-word;
        }
        span {
            width: 90%;
            height: 17px;
            margin: 3px 5%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 13px
        }
    }


    .news-list {
        margin-bottom: 50px;
        /*margin-left: 40px;*/
        .content {
            width: 100%;
            height: 170px;
            background-color: #ffffff;
            // margin: 10px 10px;
            .top {
                width: 100%;
                height: 39px;
                border-bottom: 1px solid gainsboro;
                .source {
                    line-height: 40px;
                    float: left;
                    color: skyblue;
                    font-size: 16px;
                }
                .more {
                    line-height: 40px;
                    float: right;
                }
            }
            .middle {
                width: 100%;
                height: 95px;
                margin-top: 5px;
                .title {
                    float: left;
                    width: 60%;
                    height: 100%;
                    font-size: 18px;
                }
                .pic {
                    float: right;
                    width: 35%;
                    height: 100%;
                    margin-left: 5%;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .bottom-title {
                width: 100%;
                height: 30px;
                color: grey;
            }
        }
    }
    // /deep/ .tab[data-v-5a90ec03] {
    //     width: 100%;
    // }
</style>